<template>
  <div class="block">
    <div class="timeselect">
      <el-date-picker
        v-model="timerange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button @click="saveToImg" type="primary" size="small"
        >导出img</el-button
      >
      <el-button @click="updateTodoList" size="small">确定</el-button>
    </div>
    <div ref="imgDom" class="timeline">
      <el-timeline>
        <el-timeline-item
          v-for="(activicty, index) in activities"
          :timestamp="activicty.todo_date"
          :key="index"
          :color="activicty.color"
          :size="activicty.size"
          :icon="activicty.icon"
          :type="activicty.type"
          placement="top"
        >
          <el-card>
            <h4>{{ activicty.content }}</h4>
            <p>{{ activicty.username }} 完成于{{ activicty.todo_datetime }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import DB from "../utils/db";
import { ipcRenderer } from "electron";
import html2canvas from "html2canvas";

export default {
  name: "MyTimeline",
  data() {
    return {
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 ",
          size: "large",
          type: "primary",
          icon: "el-icon-more"
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03",
          color: "#0bbd87"
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03",
          size: "large"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03"
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      timerange: [new Date(), new Date()]
    };
  },
  methods: {
    //get user info;
    updateTodoList() {
      const list = DB.getTodoByTimeScale(this.timerange[0], this.timerange[1]);
      this.activities = list;
      console.log(this.activities);
    },
    saveToImg() {
      html2canvas(this.$refs.imgDom).then(canvas => {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement("a");
        eleLink.href = canvas.toDataURL("image/png");
        eleLink.download = "pictureName";
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    }
  },
  mounted() {
    ipcRenderer.invoke("getDataPath").then(storePath => {
      DB.initDB(storePath);
      const list = DB.get("doneList");
      this.activities = list;
      console.log(this.activities);
    });
  }
};
</script>

<style lang="scss" scoped>
.block {
  * {
    background-color: unset;
    color: white;
  }
  .timeselect {
    text-align: center;
    .el-date-editor {
      max-width: 55vw;
    }
    button {
      height: 32px;
      margin: 0 10px;
    }
    div {
      input {
        background-color: transparent;
      }
    }
  }
}

.timeline {
  text-align: center;
  max-width: 89vw;
  margin: 0 auto;
}
// .el-timeline-item{
//     div{
//         top:60px
//     }
// }
</style>
<style>
.el-timeline-item__tail {
  position: absolute;
  left: 4px;
  height: 100%;
  border-left: 2px solid #e4e7ed;
  top: 60px;
}
.el-timeline-item__node--normal {
  left: -1px;
  width: 12px;
  height: 12px;
  top: 60px;
}
.el-range-input {
  background: transparent;
  color: white;
}
.el-timeline-item__timestamp.is-top {
  color: white;
}

.el-card__body:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* 时间选择文字颜色 */
.el-range-input {
  color: white !important;
}
</style>
